مرجع مقالات کاربردی حوزه اپلیکیشن

در‌اين نوشته‌علمي خواهيد آموخت كه چطور با طراحي اپليكيشن در مشهد تايپ كردن سه خط كد CSS مي‌توانيد اسكرول توشه تارنما خويش را مانند Mac Operating System نمائيد.

اگرچه اسكرول توشه دارنده محدوده پاره اي در مرورگر اينترنت ميباشد، ولي به لحاظ اينجانب آنقدر خرد وجود ندارد و نمي اقتدار آن را ناديده گرفت.
در شرايطي‌كه فرانت اند فعاليت عالي ميباشيد و به همگي جزئيات التفات مي دهيد، اين يادگرفتن كوتاه براي شما اثرگذار خواهد بود.

آغاز فرمائيد
براي سفارشي سازي (customize) اسكرول توشه وب سايت خويش، كافيه چندين خط كد را به پوشه css اضافه فرماييد. براي سفارشي سازي حتي نياز به جاوا اسكريپت هم نداريد!
كد ذيل، كد CSS را براي سفارشي كردن اسكرول توشه مرورگر اينترنت آرم مي‌دهد.

/* Customize website's scrollbar like Mac سيستم عامل
.
Not supports in Firefox and IE */

/* total width */
body::-webkit-scrollbar {
background-color: #fff;
width: 16px;
}

/* background of the scrollbar except button or resizer */
body::-webkit-scrollbar-track {
background-color: #fff;
}

/* scrollbar itself */
body::-webkit-scrollbar-thumb {
background-color: #babac0;
border-radius: 16px;
border: 4px solid #fff;
}

دقت
سفارشي كردن اسكرول توشه مرورگر اينترنت، طريق استانداردي براي استايل دهي وجود ندارد، به اين ترتيب براي استعمال از pseudo-element هاي بالا بايستي از پيشوند، --webkit-- به كارگيري نماييد.
تنها مرورگرهاي Webkit (براي مثال Chrome ، Safari) از اين خصوصيات امان مي نمايند.
مرورگرهاي ديگري مانند Firefox يا اين كه IE از اين طرز نگهباني نميكنند.

Pseudo-Element ها
براي سفارشي كردن اسكرول توشه مرورگر اينترنت مي‌توانيد از 7 pseudo-element متفاوت به كار گيري فرماييد.
كد پايين را ملاحظه كنيد:

::-webkit-scrollbar {/* 1. entire scrollbar scope */}
::-webkit-scrollbar-button {/* 2. directional buttons at the top and bottom of the scrollbar */}
::-webkit-scrollbar-track {/* 3. space below the scrollbar */}
::-webkit-scrollbar-track-piece {/* 4. not covered area by the scrollbar-thumb */}
::-webkit-scrollbar-thumb {/* 5. draggable scrollbar itself */}
::-webkit-resizer {/* 6. the draggable resizing handle that appears at the bottom corner of some elements */}
::-webkit-scrollbar-corner {/* 7. the bottom corner of the scrollbar, where both horizontal and vertical scrollbars meet */}

1. محدوده آحاد اسكرول توشه

2. دكمه هاي جهت دار در ابتدا و زير اسكرول توشه

3. مسير اسكرول توشه (فضاي ذيل اسكرول توشه)

4. بوسيله scrollbar-thumb پوشانده نشده ميباشد

5. خويش اسكرول توشه

6. مجموعه تغيير‌و تحول اندازه قابل عده شدن كه در كناره تحت بعضا از عنصرها ظواهر مي‌شود

7. كناره ذيل نوار پيمايش ، جايي كه هر دو نوار پيمايش افقي و عمودي بهم مي پيوندند

اينجانب در‌اين يادگرفتن كوتاه از اين فايده ها استعمال كردم:

::-webkit-scrollbar
::-webkit-scrollbar-track
::-webkit-scrollbar-thumb

براي استحصال داده ها بيشتر مي توانيد به‌اين پيوند مراجعه‌كنيد.